/*
 * @Descriptions: reactApp
 * @version: 1.0
 * @Author: CQY
 * @Date: 2022-04-07 16:29:58
 * @LastEditors: CQY
 * @LastEditTime: 2022-04-08 16:26:13
 */
import React from 'react';

import { Modal, Button,Table,Space,ConfigProvider } from 'antd';


import { FormOutlined,DeleteTwoTone,PlusOutlined } from '@ant-design/icons';

// 引入国际化 默认中文文案
import zhCN from 'antd/lib/locale/zh_CN';


const GoodsCategory = (props) => {

    // 大分类下 点击修改按钮功能
    const handlerBigModify = () =>{

    }

    // 大分类下 点击删除按钮功能
    const handlerBigDelete = () =>{

    }

    // 表单数据
    const data = [
        {
          key: '1',
          name: '产品大类',
          manage:''
        },
        {
            key: '2',
            name: '体育',
            manage:''
          },
      ];
      
      const columns = [
        {
          title: '分类标题',
          dataIndex: 'name',
          key: 'name',
          width:'550px',
        },
        {
          title: '管理',
          dataIndex: 'manage',
          key: 'manage',
          align:'center',
          render:(text,category) => (
        <Space>
            <PlusOutlined style={{color:"orange",cursor:"pointer"}} />
            <FormOutlined style={{cursor:"pointer",color:"#427DD0"}} onClick={()=>handlerBigModify(category)} />
            <DeleteTwoTone twoToneColor="#C00000" style={{cursor:"pointer"}} onClick={()=>handlerBigDelete(category)} />
        </Space>
          )
        },
      ];


      // 子表格
      const expandedRowRender = () => {
        const handlerModify = () =>{
    
        }
        const handlerDelete = () =>{
    
        }
        const columns = [
          { 
            title: '分类标题', 
            dataIndex: 'name', 
            key: 'name',
            width:"550px",
           },
          {
            title: 'Action',
            dataIndex: 'operation',
            key: 'operation',
            align:'center',
            render: (text,category) => (
            <Space>
                <FormOutlined style={{cursor:"pointer",color:"#427DD0"}} onClick={()=>handlerModify(category)} />
                <DeleteTwoTone twoToneColor="#C00000" style={{cursor:"pointer"}} onClick={()=>handlerDelete(category)} />
            </Space>
            ),
          },
        ];
    
        const data = [];
        for (let i = 0; i < 1; ++i) {
          data.push({
            key: i,
            // eslint-disable-next-line no-useless-concat
            name:'——' + ' 裤子',
          });
        }
        return <Table 
        columns={columns}
        dataSource={data} 
        pagination={false}
        showHeader={false}
        bordered
         />;
      };
      // 父表格
    return (
        <div>
            <ConfigProvider locale={zhCN}>
                <Modal 
                mask={false} 
                maskClosable={false}
                centered 
                footer={false} 
                title={props.title} 
                visible={props.visible} 
                // onOk={props.handleOk} 
                onCancel={props.handleCancel} 
                width={800} 
                bodyStyle={{paddingTop:"0"}}
                >
                  <div style={{textAlign:'center',height:"50px",lineHeight:"50px"}}>
                      <Button type='primary'>新增大类</Button>
                  </div>

                  <Table 
                  dataSource={data}
                  columns={columns}
                  bordered
                  rowKey={record=>(record.key)}
                  expandable={{
                    expandedRowRender:expandedRowRender,
                    defaultExpandAllRows:true,
                    // expandedRowKeys:record.key,
                    }}
                  

                  pagination={{

                  }}
                  />

                </Modal>
            </ConfigProvider>
            
        </div>
    );
}



export default GoodsCategory;
